<template>
  <div class="home">
    <div class="task-input-section">
      <h2>添加新任务</h2>
      <div class="input-group">
        <input
          v-model="newTask"
          type="text"
          placeholder="请输入任务内容..."
          @keyup.enter="addTask"
          class="task-input"
        />
        <button @click="addTask" class="add-btn">添加</button>
      </div>
    </div>

    <div class="task-list-section">
      <h2>任务列表</h2>
      <div v-if="tasks.length === 0" class="empty-state">
        <p>暂无任务，添加一个任务开始记录吧！</p>
      </div>
      <div v-else class="task-list">
        <div
          v-for="task in tasks"
          :key="task.id"
          :class="['task-item', { completed: task.completed }]"
        >
          <div class="task-content">
            <input
              type="checkbox"
              v-model="task.completed"
              class="task-checkbox"
            />
            <span class="task-text">{{ task.text }}</span>
          </div>
          <button @click="removeTask(task.id)" class="delete-btn">删除</button>
        </div>
      </div>
      
      <div v-if="tasks.length > 0" class="task-stats">
        <p>已完成: {{ completedCount }} / {{ tasks.length }}</p>
        <button @click="clearCompleted" class="clear-btn">清除已完成</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const newTask = ref('')
const tasks = ref([
  { id: 1, text: '学习 Vue 3 组合式 API', completed: true },
  { id: 2, text: '完成项目文档编写', completed: false },
  { id: 3, text: '准备技术分享内容', completed: false }
])

const completedCount = computed(() => {
  return tasks.value.filter(task => task.completed).length
})

const addTask = () => {
  if (newTask.value.trim()) {
    tasks.value.push({
      id: Date.now(),
      text: newTask.value.trim(),
      completed: false
    })
    newTask.value = ''
  }
}

const removeTask = (id) => {
  tasks.value = tasks.value.filter(task => task.id !== id)
}

const clearCompleted = () => {
  tasks.value = tasks.value.filter(task => !task.completed)
}
</script>

<style scoped>
.home {
  max-width: 600px;
  margin: 0 auto;
}

.task-input-section {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.task-input-section h2 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.25rem;
}

.input-group {
  display: flex;
  gap: 0.5rem;
}

.task-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.task-input:focus {
  outline: none;
  border-color: #ffa500;
}

.add-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
  color: #333;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.add-btn:hover {
  transform: translateY(-1px);
}

.task-list-section {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.task-list-section h2 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.25rem;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.task-list {
  space-y: 0.5rem;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: all 0.3s;
}

.task-item:hover {
  border-color: #ffa500;
}

.task-item.completed {
  background-color: #fff9e6;
  opacity: 0.7;
}

.task-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.task-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.task-text {
  font-size: 1rem;
  color: #333;
}

.task-item.completed .task-text {
  text-decoration: line-through;
  color: #666;
}

.delete-btn {
  padding: 0.5rem 1rem;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.3s;
}

.delete-btn:hover {
  background: #c0392b;
}

.task-stats {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e1e5e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-stats p {
  color: #666;
  font-size: 0.9rem;
}

.clear-btn {
  padding: 0.5rem 1rem;
  background: #95a5a6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.3s;
}

.clear-btn:hover {
  background: #7f8c8d;
}

@media (max-width: 768px) {
  .task-input-section,
  .task-list-section {
    padding: 1.5rem;
  }
  
  .input-group {
    flex-direction: column;
  }
  
  .task-stats {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .task-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .task-content {
    justify-content: flex-start;
  }
}
</style>